<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 在线聊天室</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialdesignicons.min.css"/>
    <link rel="stylesheet" href="css/login.css"/>
</head>
<body>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="login-card p-4 p-md-5 mx-auto">
                <h2 class="register-header text-center mb-4">注&nbsp;&nbsp;册</h2>
                <form id="registerForm" method="post" action="/register">
                    <!-- 用户名 -->
                    <div class="mb-3">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-account input-icon"></i>
                            <input type="text" name="username" class="form-control py-2"
                                   placeholder="用户名 (3-20位字母数字)" required
                                   pattern="[a-zA-Z0-9]{3,20}">
                        </div>
                    </div>

                    <!-- 密码 -->
                    <div class="mb-3">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-lock input-icon"></i>
                            <input type="password" name="password" id="password"
                                   class="form-control py-2" placeholder="密码 (至少6位)" required
                                   minlength="6">
                            <span class="show-password" toggle="#password">
                                <i class="mdi mdi-eye"></i>
                            </span>
                        </div>
                        <div class="password-strength">
                            <div class="strength-meter" id="strengthMeter"></div>
                        </div>
                    </div>

                    <!-- 确认密码 -->
                    <div class="mb-4">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-check input-icon"></i>
                            <input type="password" name="confirmPassword" id="confirmPassword"
                                   class="form-control py-2" placeholder="确认密码" required
                                   minlength="6">
                            <span class="show-password" toggle="#confirmPassword">
                                <i class="mdi mdi-eye"></i>
                            </span>
                        </div>
                        <small class="text-danger" id="confirmError"></small>
                    </div>

                    <div class="mb-3">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-account input-icon"></i>
                            <input type="text" name="realName" class="form-control py-2"
                                   placeholder="真实姓名" required>
                        </div>
                    </div>

                    <!-- 邮箱 -->
                    <div class="mb-4">
                        <div class="input-group position-relative">
                            <i class="mdi mdi-email input-icon"></i>
                            <input type="email" name="email" class="form-control py-2"
                                   placeholder="电子邮箱" required>
                        </div>
                    </div>

                    <!-- 错误信息 -->
                    <div class="error-message text-danger mb-3" id="errorMessage">
                        &nbsp;
                    </div>

                    <!-- 注册按钮 -->
                    <button type="submit" class="btn btn-register btn-success w-100 py-2 mb-3" id="registerBtn">
                        注 册
                    </button>

                    <!-- 登录链接 -->
                    <div class="text-center">
                        <small class="text-muted">已有账号？<a href="login.html" th:href="@{/login}"
                                                              class="text-decoration-none">立即登录</a></small>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
    $(document).ready(function () {
        // 密码显示/隐藏切换（复用登录页逻辑）
        $('.show-password').click(function () {
            const target = $($(this).attr('toggle'));
            const icon = $(this).find('i');

            if (target.attr('type') === 'password') {
                target.attr('type', 'text');
                icon.removeClass('mdi-eye').addClass('mdi-eye-off');
            } else {
                target.attr('type', 'password');
                icon.removeClass('mdi-eye-off').addClass('mdi-eye');
            }
        });

        // 密码强度检测
        $('#password').on('input', function () {
            const password = $(this).val();
            const meter = $('#strengthMeter');
            let strength = 0;

            // 长度评分
            if (password.length > 0) strength += 1;
            if (password.length >= 8) strength += 1;

            // 复杂度评分
            if (/[A-Z]/.test(password)) strength += 1;
            if (/[0-9]/.test(password)) strength += 1;
            if (/[^A-Za-z0-9]/.test(password)) strength += 1;

            // 更新UI
            meter.removeClass('strength-weak strength-medium strength-strong');

            if (strength <= 2) {
                meter.addClass('strength-weak').css('width', '30%');
            } else if (strength <= 4) {
                meter.addClass('strength-medium').css('width', '60%');
            } else {
                meter.addClass('strength-strong').css('width', '100%');
            }
        });

        // 确认密码验证
        $('#confirmPassword').on('input', function () {
            const confirmError = $('#confirmError');
            if ($(this).val() !== $('#password').val()) {
                confirmError.text('两次输入的密码不一致');
            } else {
                confirmError.text('');
            }
        });

        // 表单提交
        $('#registerForm').submit(function (e) {
            e.preventDefault();
            const btn = $('#registerBtn');
            const errorMsg = $('#errorMessage');

            // 基础验证
            if ($('#password').val() !== $('#confirmPassword').val()) {
                showError('两次输入的密码不一致');
                return;
            }

            // 设置加载状态
            btn.prop('disabled', true);
            btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 注册中...');

            // 发送请求
            $.ajax({
                url: '/auth/register',
                type: 'POST',
                data: $(this).serialize(),
                success: function (res) {
                    if (res.code === 200) {
                        alert('注册成功，前往登录！');
                        btn.prop('disabled', false);
                        btn.text('注 册');
                        window.location.href = 'login?registerSuccess=true';
                    } else {
                        showError(res.message || '注册失败，请重试');
                    }
                },
                error: function (xhr) {
                    showError(xhr.responseJSON?.message || '网络错误: ' + xhr.statusText);
                },
                complete: function () {
                    btn.prop('disabled', false);
                    btn.text('注 册');
                }
            });

            function showError(message) {
                errorMsg.text(message).addClass('show');
                setTimeout(() => {
                    errorMsg.removeClass('show');
                }, 5000);
            }
        });
    });
</script>
</body>
</html>
